<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成图片</title>
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .image-container {
            margin-bottom: 30px;
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 8px;
        }
        h2 {
            margin-top: 0;
            color: #4CAF50;
        }
        .instructions {
            margin-bottom: 20px;
            background-color: #f9f9f9;
            padding: 15px;
            border-radius: 5px;
            border-left: 4px solid #4CAF50;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
        }
        button:hover {
            background-color: #388E3C;
        }
    </style>
</head>
<body>
    <h1>营养健康管理系统 - 图片生成工具</h1>
    
    <div class="instructions">
        <p><strong>使用说明：</strong></p>
        <ol>
            <li>点击每个图片下方的"下载SVG"按钮下载SVG文件</li>
            <li>将下载的SVG文件转换为相应的PNG或JPG格式（可使用在线转换工具或图像编辑软件）</li>
            <li>将转换后的图片文件放入nutrition-health-system/frontend/images/目录中</li>
            <li>确保文件名与页面中引用的名称一致</li>
        </ol>
    </div>

    <!-- Logo图片 -->
    <div class="image-container">
        <h2>1. logo-placeholder.png</h2>
        <p>用于所有页面的导航栏</p>
        <svg id="logo" width="100" height="100" viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="45" fill="#4CAF50" />
            <text x="50" y="55" font-size="20" text-anchor="middle" fill="white">营养</text>
            <path d="M30,70 Q50,90 70,70" stroke="white" stroke-width="3" fill="none" />
        </svg>
        <br>
        <button onclick="downloadSVG('logo', 'logo-placeholder.png')">下载SVG</button>
    </div>

    <!-- Banner图片 -->
    <div class="image-container">
        <h2>2. banner-placeholder.jpg</h2>
        <p>用于首页的横幅</p>
        <svg id="banner" width="800" height="400" viewBox="0 0 800 400">
            <defs>
                <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color:#4CAF50;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#2196F3;stop-opacity:1" />
                </linearGradient>
            </defs>
            <rect width="800" height="400" fill="url(#grad1)" />
            <circle cx="600" cy="150" r="80" fill="white" fill-opacity="0.2" />
            <circle cx="200" cy="300" r="120" fill="white" fill-opacity="0.1" />
            <text x="400" y="180" font-size="40" text-anchor="middle" fill="white">健康饮食，科学营养</text>
            <text x="400" y="230" font-size="24" text-anchor="middle" fill="white">营养健康管理系统</text>
        </svg>
        <br>
        <button onclick="downloadSVG('banner', 'banner-placeholder.jpg')">下载SVG</button>
    </div>

    <!-- 食品图片1 -->
    <div class="image-container">
        <h2>3. food-placeholder-1.jpg (苹果)</h2>
        <p>用于食品分析页面</p>
        <svg id="food1" width="300" height="200" viewBox="0 0 300 200">
            <rect width="300" height="200" fill="#f8f8f8" />
            <circle cx="150" cy="100" r="70" fill="#e53935" />
            <path d="M150,30 Q180,10 180,60" stroke="#43a047" stroke-width="6" fill="none" />
            <text x="150" y="170" font-size="20" text-anchor="middle" fill="#333">苹果</text>
        </svg>
        <br>
        <button onclick="downloadSVG('food1', 'food-placeholder-1.jpg')">下载SVG</button>
    </div>

    <!-- 食品图片2 -->
    <div class="image-container">
        <h2>4. food-placeholder-2.jpg (香蕉)</h2>
        <p>用于食品分析页面</p>
        <svg id="food2" width="300" height="200" viewBox="0 0 300 200">
            <rect width="300" height="200" fill="#f8f8f8" />
            <path d="M100,150 Q150,50 250,100" stroke="#FFD600" stroke-width="40" stroke-linecap="round" fill="none" />
            <path d="M100,150 Q150,50 250,100" stroke="#FBC02D" stroke-width="35" stroke-linecap="round" fill="none" />
            <text x="150" y="170" font-size="20" text-anchor="middle" fill="#333">香蕉</text>
        </svg>
        <br>
        <button onclick="downloadSVG('food2', 'food-placeholder-2.jpg')">下载SVG</button>
    </div>

    <!-- 食品图片3 -->
    <div class="image-container">
        <h2>5. food-placeholder-3.jpg (橙子)</h2>
        <p>用于食品分析页面</p>
        <svg id="food3" width="300" height="200" viewBox="0 0 300 200">
            <rect width="300" height="200" fill="#f8f8f8" />
            <circle cx="150" cy="100" r="70" fill="#FF9800" />
            <path d="M150,30 Q180,10 180,60" stroke="#43a047" stroke-width="6" fill="none" />
            <path d="M150,100 L150,170" stroke="#FFB74D" stroke-width="2" />
            <path d="M120,100 L180,100" stroke="#FFB74D" stroke-width="2" />
            <text x="150" y="170" font-size="20" text-anchor="middle" fill="#333">橙子</text>
        </svg>
        <br>
        <button onclick="downloadSVG('food3', 'food-placeholder-3.jpg')">下载SVG</button>
    </div>

    <!-- 食品图片4 -->
    <div class="image-container">
        <h2>6. food-placeholder-4.jpg (草莓)</h2>
        <p>用于食品分析页面</p>
        <svg id="food4" width="300" height="200" viewBox="0 0 300 200">
            <rect width="300" height="200" fill="#f8f8f8" />
            <path d="M150,60 Q200,100 150,150 Q100,100 150,60" fill="#e53935" />
            <circle cx="140" cy="90" r="5" fill="#FFEB3B" />
            <circle cx="160" cy="90" r="5" fill="#FFEB3B" />
            <circle cx="150" cy="110" r="5" fill="#FFEB3B" />
            <circle cx="130" cy="110" r="5" fill="#FFEB3B" />
            <circle cx="170" cy="110" r="5" fill="#FFEB3B" />
            <path d="M150,60 Q160,40 170,50" stroke="#43a047" stroke-width="6" fill="none" />
            <text x="150" y="170" font-size="20" text-anchor="middle" fill="#333">草莓</text>
        </svg>
        <br>
        <button onclick="downloadSVG('food4', 'food-placeholder-4.jpg')">下载SVG</button>
    </div>

    <script>
        function downloadSVG(id, filename) {
            const svg = document.getElementById(id);
            const serializer = new XMLSerializer();
            let source = serializer.serializeToString(svg);
            
            // 添加XML声明
            source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
            
            // 创建Blob对象
            const svgBlob = new Blob([source], {type:"image/svg+xml;charset=utf-8"});
            const svgUrl = URL.createObjectURL(svgBlob);
            
            // 创建下载链接
            const downloadLink = document.createElement("a");
            downloadLink.href = svgUrl;
            downloadLink.download = filename.replace('.jpg', '.svg').replace('.png', '.svg');
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
            
            // 释放URL对象
            URL.revokeObjectURL(svgUrl);
        }
    </script>
</body>
</html>